<template>
	<view class="wrap">
		<view class="title-wrap">
			<view class="avatar">
				<image :src="avatar"></image>
			</view>
			<view class="info">
				<view class="name">{{userName}}</view>
			</view>
			<view class="triangleLeft"></view>
			<view class="triangleRight"></view>
		</view>
		<view class="code-wrap">
			<view class="QRcode">
				<tki-qrcode v-if="val && icon" cid="qrcode1" ref="qrcode" :val="val" :size="464" pdground="#FF9900" :icon="icon"
				 :iconSize="60" :onval="true" :loadMake="true" @result="qrR" />
			</view>
			<view class="tip">
				<button type="primary" @tap="saveQrcode" style="background: #fe9900;">保存二维码</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	var that = ''
	export default {
		components: {
			tkiQrcode
		},
		data() {
			that = this;
			return {
				avatar: uni.getStorageSync('userInfo').avatar, //头像
				userName: uni.getStorageSync('userInfo').nicheng, //昵称
				className: '',
				val: '', // 要生成的二维码值
				icon: '', // 二维码图标
				src: '' // 二维码生成后的图片地址或base64
			};
		},
		onShow() {
			var img = uni.getStorageSync('userInfo').avatar;
			var header = '';
			if (img) {
				header = img.substring(0, 7);
			}
			if (!img || (img && header != 'http://' && header != 'https:/')) {
				this.avatar = this.defimg;
			} else {
				this.avatar = img;
			}
			this.urlTobase64(this.avatar);

			this.$zapi.apiPost('user/currency.basic/GetExtensionLink').then(res => {
				if (res.data.code == 200) {
					var share_url = res.data.data.shareUrl;
					var share_code = share_url.split('?shareCode=');
					that.val = "http://hgt.iccnet.cn/h5/student/index.html#/?shareCode=" + encodeURIComponent(share_code[1]) +
						"&register_type=" + uni.getStorageSync('userInfo').users_type
					that.$forceUpdate()
				}
			})
		},
		methods: {
			// 网络图片转base64
			urlTobase64(url) {
				var _this = this;
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: async res => {
						let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						_this.icon = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
					}
				});
			},
			qrR(res) {
				this.src = res
			},
			saveQrcode() {
				this.$refs.qrcode._saveCode()
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		display: flex;
		align-items: center;
		background: #fe9900;
	}

	.wrap {
		width: 650upx;
		box-sizing: border-box;
		margin: 0 auto;
		border-radius: 5px;
		background: #fff;
	}

	.title-wrap {
		position: relative;
		height: 228upx;
		display: flex;
		align-items: center;
		border-bottom: 1px dashed #999;
	}

	.avatar {
		width: 80upx;
		height: 80upx;
		margin-left: 120upx;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.info {
		margin-left: 50upx;
	}

	.name {
		color: #333;
		font-size: 36upx;
		font-weight: bold;
	}

	.school {
		color: #333;
		font-size: 28upx;
	}

	.triangleLeft {
		position: absolute;
		left: -1px;
		bottom: -15upx;
		width: 0;
		height: 0;
		border-bottom: 15upx solid transparent;
		border-top: 15upx solid transparent;
		border-left: 20upx solid #fe9900;
	}

	.triangleRight {
		position: absolute;
		right: -1px;
		bottom: -15upx;
		width: 0;
		height: 0;
		border-bottom: 15upx solid transparent;
		border-top: 15upx solid transparent;
		border-right: 20upx solid #fe9900;
	}

	.code-wrap {
		display: flex;
		height: 822upx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.QRcode {
		width: 464upx;
		height: 464upx;
	}

	.QRcode image {
		width: 100%;
		height: 100%;
	}

	.tip {
		margin-top: 80upx;
		color: #999;
		font-size: 36upx;
		text-align: center;
	}
</style>
